<script setup lang="ts">
import { ref } from "vue";

const emits = defineEmits(["drag"]);

const active = ref("component");

const templatelist = ref([
  {
    label: "注册页",
    url: "",
  },
  {
    label: "登陆页",
    url: "",
  },
  {
    label: "个人信息页",
    url: "",
  },
]);
const componentlist = ref([
  {
    value: 1,
    label: "布局组件",
    chidren: [
      {
        value: 1,
        label: "栅格布局",
        icon: "Checked",
        type: "grid-layout",
      },
    ],
  },
  {
    value: 1,
    label: "常用组件",
    chidren: [
      {
        value: 1,
        label: "单行文本",
        icon: "Checked",
        type: "text",
        component: "ElInput",
      },
      {
        value: 2,
        label: "密码框",
        icon: "Checked",
        type: "password",
      },
      {
        value: 3,
        label: "计数器",
        icon: "Checked",
        type: "number",
      },
      {
        value: 4,
        label: "多行文本",
        icon: "Checked",
        type: "textarea",
      },
      {
        value: 5,
        label: "单选组",
        icon: "Checked",
        type: "radio",
        options: [
          {
            label: "是",
            value: 1,
          },
        ],
      },
      {
        value: 6,
        label: "多选组",
        icon: "Checked",
        type: "checkbox",
        options: [
          {
            label: "是",
            value: 1,
          },
        ],
      },
      {
        value: 7,
        label: "时间选择器",
        icon: "Checked",
        type: "time",
      },
      {
        value: 8,
        label: "日期选择器",
        icon: "Checked",
        type: "data",
      },
      {
        value: 9,
        label: "评分",
        icon: "Checked",
        type: "score",
      },
      {
        value: 10,
        label: "下拉选择框",
        icon: "Checked",
        type: "select",
        options: [
          {
            label: "是",
            value: 1,
          },
        ],
      },
      {
        value: 11,
        label: "开关",
        icon: "Checked",
        type: "switch",
      },
      {
        value: 12,
        label: "文字",
        icon: "Checked",
        type: "write",
      },
      {
        value: 13,
        label: "滑块",
        icon: "Checked",
        type: "slider",
      },
    ],
  },
  {
    value: 1,
    label: "高级组件",
    chidren: [
      {
        value: 1,
        label: "图片",
        icon: "Checked",
        type: "image",
      },
      {
        value: 2,
        label: "富文本",
        icon: "Checked",
        type: "editor",
      },
      {
        value: 3,
        label: "级联选择器",
        icon: "Checked",
        type: "Cascader",
      },
    ],
  },
]);
</script>
<template>
  <div class="component-panel">
    <el-tabs v-model="active">
      <el-tab-pane label="模板" name="template">
        <div class="template-list">
          <template v-for="item in templatelist">
            <el-card :header="item.label" style="margin: 5px 0">
              <div><img :src="item.url" /></div>
              <div>
                <el-button type="primary">预览</el-button>
                <el-button type="primary">使用</el-button>
                <el-button type="primary">导出</el-button>
              </div>
            </el-card>
          </template>
        </div>
      </el-tab-pane>
      <el-tab-pane label="组件" name="component">
        <div class="component-list">
          <div v-for="item in componentlist">
            {{ item.label }}

            <el-row>
              <template v-for="componentItem in item.chidren">
                <el-col :span="12"
                  ><el-button
                    class="component-item"
                    type="default"
                    :draggable="true"
                    @dragstart="emits('drag', componentItem)"
                  >
                    <el-icon style="vertical-align: middle" :size="20">
                      <component :is="componentItem.icon" />
                    </el-icon>
                    {{ componentItem.label }}</el-button
                  ></el-col
                >
              </template>
            </el-row>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="css" scoped>
.component-panel {
  border: 1px solid #dcdfe6;
  border-right: none;
  padding: 10px;
  height: 577px;
}
.template-list,.component-list {
  height: 500px;
  overflow-y: auto;
}
.component-item {
  margin: 5px;
  justify-content: left;
  width: 120px;
}
.component-item:hover {
  cursor: move;
}
</style>
